<template>
  <div class="exam-list-container">
    <!-- 添加通知区域 -->
    <el-card class="notification-container" shadow="never">
      <template #header>
        <div class="notification-header">
          <div class="notification-title">
            <el-icon><Bell /></el-icon>
            <span>通知公告</span>
          </div>
          <div class="notification-actions">
            <el-badge :value="unreadCount > 0 ? unreadCount : ''" :max="99" class="notification-badge">
              <span>未读通知</span>
            </el-badge>
            <el-button type="text" @click="toggleNotificationExpand">
              {{ notificationExpanded ? '收起' : '展开' }}
              <el-icon>
                <component :is="notificationExpanded ? 'ArrowUp' : 'ArrowDown'" />
              </el-icon>
            </el-button>
          </div>
        </div>
      </template>
      
      <!-- 折叠状态下只显示未读数量，不显示通知内容 -->
      <div v-if="!notificationExpanded" class="notification-collapsed">
        <div class="notification-summary">
          <el-icon><Bell /></el-icon>
          <span>您有 {{ totalNotifications }} 条通知，其中 {{ unreadCount }} 条未读</span>
        </div>
      </div>
      
      <!-- 展开状态下显示通知列表，高度为一条通知 -->
      <div v-else>
        <div v-if="notifications.length === 0" class="empty-notifications">
          <el-empty description="暂无通知" />
        </div>
        <div v-else class="notification-expanded">
          <el-scrollbar height="120px" class="notification-scrollbar">
            <div 
              v-for="notification in notifications" 
              :key="notification.notificationId" 
              :class="['notification-item', !notification.readStatus ? 'unread' : '']"
              @click="viewNotification(notification.notificationId)"
            >
              <div class="notification-priority" :class="'priority-' + notification.priority"></div>
              <div class="notification-content">
                <div class="notification-title-text">{{ notification.title }}</div>
                <div class="notification-brief">{{ notification.content.substring(0, 50) + (notification.content.length > 50 ? '...' : '') }}</div>
                <div class="notification-meta">
                  <span>{{ formatDateTime(notification.sendTime) }}</span>
                  <span v-if="!notification.readStatus" class="unread-badge">未读</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
          <div class="notification-more" v-if="totalNotifications > 5">
            <el-button type="text" @click="showAllNotifications">查看全部通知</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 通知详情弹窗 -->
    <el-dialog
      v-model="notificationDetailVisible"
      :title="currentNotification.title || '通知详情'"
      width="500px"
      destroy-on-close
    >
      <div class="notification-detail" v-if="currentNotification">
        <div class="notification-detail-meta">
          <div class="notification-detail-sender">发送人：{{ currentNotification.senderName || '系统' }}</div>
          <div class="notification-detail-time">{{ formatDateTime(currentNotification.sendTime) }}</div>
        </div>
        <div class="notification-detail-content">{{ currentNotification.content }}</div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="notificationDetailVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 全部通知弹窗 -->
    <el-dialog
      v-model="allNotificationsVisible"
      title="全部通知"
      width="700px"
      destroy-on-close
    >
      <div class="all-notifications-container">
        <div v-if="allNotifications.length === 0" class="empty-notifications">
          <el-empty description="暂无通知" />
        </div>
        <div v-else class="all-notifications-list">
          <div 
            v-for="notification in allNotifications" 
            :key="notification.notificationId" 
            :class="['notification-item', !notification.readStatus ? 'unread' : '']"
            @click="viewNotification(notification.notificationId)"
          >
            <div class="notification-priority" :class="'priority-' + notification.priority"></div>
            <div class="notification-content">
              <div class="notification-title-text">{{ notification.title }}</div>
              <div class="notification-brief">{{ notification.content.substring(0, 50) + (notification.content.length > 50 ? '...' : '') }}</div>
              <div class="notification-meta">
                <span>{{ formatDateTime(notification.sendTime) }}</span>
                <span v-if="!notification.readStatus" class="unread-badge">未读</span>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          v-if="totalNotifications > 0"
          class="notification-pagination"
          :total="totalNotifications"
          :current-page="notificationQueryParams.pageNum"
          :page-size="notificationQueryParams.pageSize"
          layout="total, prev, pager, next"
          @current-change="handleNotificationPageChange"
          background
        />
      </div>
    </el-dialog>

    <el-card class="filter-container" shadow="never">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="考试名称">
          <el-input
            v-model="queryParams.examName"
            placeholder="请输入考试名称"
            clearable
            @keyup.enter="handleQuery"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="考试科目">
          <el-input
            v-model="queryParams.subject"
            placeholder="请输入考试科目"
            clearable
            @keyup.enter="handleQuery"
          >
            <template #prefix>
              <el-icon><School /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="考试状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option label="待开始" value="待开始" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已结束" value="已结束" />
            <el-option label="已提交" value="已提交" />
            <el-option label="已批改" value="已批改" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" :icon="Search">查询</el-button>
          <el-button @click="resetQuery" :icon="RefreshLeft">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="exam-cards-container" v-loading="loading" element-loading-text="加载考试信息...">
      <div class="waterfall-container">
        <div v-for="(exam, index) in examList" 
             :key="exam.examId" 
             class="waterfall-item"
             :class="getCardColorClass(index)"
             :style="{ '--delay': `${index * 0.1}s` }">
          <el-card class="exam-card" shadow="never">
            <div class="exam-card-header">
              <h3 class="exam-title">{{ exam.examName }}</h3>
              <div class="exam-header-right">
                <el-tag :type="getStatusType(exam.personalStatus || exam.status)" effect="light">{{ exam.personalStatus || exam.status }}</el-tag>
              </div>
            </div>
            
            <div class="exam-info">
              <div class="info-item">
                <el-icon class="icon-wrapper"><School /></el-icon>
                <span>科目：{{ exam.subject }}</span>
              </div>
              <div class="info-item">
                <el-icon class="icon-wrapper"><Timer /></el-icon>
                <span>开始时间：{{ formatDateTime(exam.startTime) }}</span>
              </div>
              <div class="info-item">
                <el-icon class="icon-wrapper"><Clock /></el-icon>
                <span>时长：{{ exam.duration }}分钟</span>
              </div>
              <div class="info-item">
                <el-icon class="icon-wrapper"><Document /></el-icon>
                <span>总分：{{ exam.totalScore }}分</span>
              </div>
            </div>

            <div class="exam-actions">
              <el-button 
                type="primary" 
                :disabled="exam.status !== '进行中'"
                @click="handleStartExam(exam)"
              >
                进入考试
              </el-button>
            </div>
          </el-card>
        </div>
      </div>

      <el-pagination
        v-if="total > 0"
        class="pagination"
        :total="total"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :page-sizes="[9, 18, 27, 36]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getstudentExamList } from '@/api/exam'
import { notificationApi } from '@/api/notification'
import request from '@/utils/request'
import { 
  School, 
  Timer, 
  Clock, 
  Trophy,
  Collection,
  Search, 
  RefreshLeft,
  Document,
  Bell,
  ArrowDown,
  ArrowUp
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const router = useRouter()
const loading = ref(false)
const examList = ref([])
const total = ref(0)
const originalExamList = ref([]) // 保存原始数据
const now = ref(Date.now())
let timer = null

// 通知相关数据
const notifications = ref([])
const totalNotifications = ref(0)
const unreadCount = ref(0)
const notificationDetailVisible = ref(false)
const currentNotification = ref({})
const allNotificationsVisible = ref(false)
const allNotifications = ref([])
const notificationQueryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const notificationExpanded = ref(false)

// 切换通知展开/折叠状态
const toggleNotificationExpand = () => {
  notificationExpanded.value = !notificationExpanded.value
}

const queryParams = ref({
  pageNum: 1,
  pageSize: 9,
  examName: '',
  subject: '',
  status: ''
})

// 判断考试是否可以开始
const canStartExam = (startTime) => {
  const now = dayjs()
  const examStartTime = dayjs(startTime)
  const diffMinutes = now.diff(examStartTime, 'minute')
  // 只有在考试开始时间的15分钟内可以进入考试
  return diffMinutes >= 0 && diffMinutes <= 15
}

// 格式化考试时间显示
const formatExamTime = (startTime) => {
  const now = dayjs()
  const examStartTime = dayjs(startTime)
  const diffMinutes = now.diff(examStartTime, 'minute')
  const diffDays = Math.abs(examStartTime.diff(now, 'day'))
  
  
}

// 获取考试列表
const loadExamList = async () => {
  loading.value = true
  try {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
    const schoolNumber = userInfo.schoolNumber
    if (!schoolNumber) {
      ElMessage.error('获取用户信息失败')
      return
    }
    
    const res = await getstudentExamList(schoolNumber)
    if (res.code === 200) {
      originalExamList.value = res.data // 保存原始数据
      filterAndPaginateExams() // 应用筛选和分页
    }
  } catch (error) {
    console.error('获取考试列表失败:', error)
    //ElMessage.error('获取考试列表失败')
  } finally {
    loading.value = false
  }
}

// 筛选和分页处理
const filterAndPaginateExams = () => {
  let filteredList = [...originalExamList.value]
  
  // 应用筛选条件
  if (queryParams.value.examName) {
    filteredList = filteredList.filter(item => 
      item.examName.toLowerCase().includes(queryParams.value.examName.toLowerCase())
    )
  }
  if (queryParams.value.subject) {
    filteredList = filteredList.filter(item => 
      item.subject.toLowerCase().includes(queryParams.value.subject.toLowerCase())
    )
  }
  if (queryParams.value.status) {
    filteredList = filteredList.filter(item => 
      item.personalStatus === queryParams.value.status
    )
  }
  
  // 按照个人状态排序：优先"待开始"，其次"进行中"，最后其他状态
  // 在相同状态内，按照考试时间与当前时间的接近程度排序
  filteredList.sort((a, b) => {
    // 状态优先级
    const getPriority = (status) => {
      if (status === '待开始') return 1;
      if (status === '进行中') return 2;
      return 3; // 其他状态
    };
    
    const aPriority = getPriority(a.personalStatus || a.status);
    const bPriority = getPriority(b.personalStatus || b.status);
    
    // 如果状态优先级不同，按优先级排序
    if (aPriority !== bPriority) {
      return aPriority - bPriority;
    }
    
    // 如果状态相同，按时间接近度排序
    const now = new Date().getTime();
    const aDiff = Math.abs(new Date(a.startTime).getTime() - now);
    const bDiff = Math.abs(new Date(b.startTime).getTime() - now);
    return aDiff - bDiff;
  });
  
  // 更新总数
  total.value = filteredList.length
  
  // 分页处理
  const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize
  const end = start + queryParams.value.pageSize
  examList.value = filteredList.slice(start, end)
}

// 获取状态标签类型
const getStatusType = (status) => {
  const types = {
    '待开始': 'info',
    '进行中': 'success',
    '已结束': 'danger',
    '已提交': 'success',
    '已批改': 'success',
    '超过规定时间,不可进入考试': 'warning'
  }
  return types[status] || 'info'
}

// 进入考试
const handleStartExam = async (exam) => {
  const status = exam.personalStatus || exam.status;
  if (status !== '进行中') {
    if (status === '已提交' || status === '已批改') {
      ElMessage.warning('您已完成此考试')
    } else {
      ElMessage.warning('考试未开始或已结束')
    }
    return
  }
  
  router.push({
    path: '/student/exam',
    query: {
      examId: exam.examId
    }
  })
}

// 获取卡片颜色类名
const getCardColorClass = (index) => {
  const classes = ['card-blue', 'card-green', 'card-purple', 'card-orange'];
  return classes[index % classes.length];
}

// 格式化日期时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hour = date.getHours().toString().padStart(2, '0')
  const minute = date.getMinutes().toString().padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}`
}

// 检查考试状态并刷新
const checkExamStatus = () => {
  const currentTime = new Date()
  let needRefresh = false
  
  for (const exam of examList.value) {
    if (exam.status === '待开始') {
      const startTime = new Date(exam.startTime)
      // 比较年月日时分秒是否完全相等
      if (currentTime.getFullYear() === startTime.getFullYear() &&
          currentTime.getMonth() === startTime.getMonth() &&
          currentTime.getDate() === startTime.getDate() &&
          currentTime.getHours() === startTime.getHours() &&
          currentTime.getMinutes() === startTime.getMinutes() &&
          currentTime.getSeconds() === startTime.getSeconds()) {
        needRefresh = true
        break
      }
    }
  }
  
  if (needRefresh) {
    loadExamList()
  }
}

// 获取学生通知列表（首页只显示最新5条）
const fetchNotifications = async () => {
  try {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
    const studentId = userInfo.schoolNumber
    if (!studentId) {
      ElMessage.error('获取用户信息失败')
      return
    }
    
    const response = await notificationApi.getStudentNotifications(
      studentId, 
      1, 
      5
    )
    
    if (response.code === 200 && response.data) {
      let notificationList = []
      if (Array.isArray(response.data)) {
        notificationList = response.data
        totalNotifications.value = response.data.length
      } else if (response.data.notifications) {
        notificationList = response.data.notifications
        totalNotifications.value = response.data.total || response.data.notifications.length
      } else if (response.data.list) {
        notificationList = response.data.list
        totalNotifications.value = response.data.total || response.data.list.length
      }
      
      // 对通知进行排序：未读的排在前面，已读的排在后面
      notifications.value = notificationList.sort((a, b) => {
        // 如果a未读b已读，a排前面
        if (!a.readStatus && b.readStatus) return -1
        // 如果a已读b未读，b排前面
        if (a.readStatus && !b.readStatus) return 1
        // 如果读取状态相同，按时间倒序排列（新的在前）
        return new Date(b.sendTime || b.createTime) - new Date(a.sendTime || a.createTime)
      })
    } else {
      notifications.value = []
      totalNotifications.value = 0
    }
    
    // 获取未读通知数量
    fetchUnreadCount()
  } catch (error) {
    console.error('获取通知列表失败:', error)
    notifications.value = []
    totalNotifications.value = 0
  }
}

// 获取未读通知数量
const fetchUnreadCount = async () => {
  try {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
    const studentId = userInfo.schoolNumber
    if (!studentId) return
    
    const response = await notificationApi.getUnreadCount(studentId)
    
    if (response.code === 200 && response.data) {
      unreadCount.value = response.data.count || 0
    }
  } catch (error) {
    console.error('获取未读通知数量失败:', error)
  }
}

// 查看通知详情
const viewNotification = async (notificationId) => {
  if (!notificationId) {
    ElMessage.warning('通知ID不存在')
    return
  }
  
  try {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
    const studentId = userInfo.schoolNumber
    if (!studentId) {
      ElMessage.error('获取用户信息失败')
      return
    }
    
    const response = await notificationApi.getNotificationDetail(notificationId, studentId)
    
    if (response.code === 200 && response.data) {
      // 确保通知对象有正确的ID字段
      currentNotification.value = {
        ...response.data,
        notificationId: response.data.notificationId || response.data.id || notificationId
      }
      notificationDetailVisible.value = true
      
      // 标记为已读
      if (!response.data.readStatus) {
        await notificationApi.markAsRead(notificationId, studentId)
        // 刷新未读数和通知列表
        fetchUnreadCount()
        fetchNotifications()
        if (allNotificationsVisible.value) {
          fetchAllNotifications()
        }
      }
    } else {
      ElMessage.warning(response.message || '获取通知详情失败')
    }
  } catch (error) {
    console.error('查看通知详情失败:', error)
    ElMessage.error('查看通知详情失败，请重试')
  }
}

// 显示全部通知
const showAllNotifications = () => {
  allNotificationsVisible.value = true
  notificationQueryParams.value.pageNum = 1
  fetchAllNotifications()
}

// 获取全部通知
const fetchAllNotifications = async () => {
  try {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
    const studentId = userInfo.schoolNumber
    if (!studentId) {
      ElMessage.error('获取用户信息失败')
      return
    }
    
    const response = await notificationApi.getStudentNotifications(
      studentId, 
      notificationQueryParams.value.pageNum, 
      notificationQueryParams.value.pageSize
    )
    
    if (response.code === 200 && response.data) {
      let notificationList = []
      if (Array.isArray(response.data)) {
        notificationList = response.data
        totalNotifications.value = response.data.length
      } else if (response.data.notifications) {
        notificationList = response.data.notifications
        totalNotifications.value = response.data.total || response.data.notifications.length
      } else if (response.data.list) {
        notificationList = response.data.list
        totalNotifications.value = response.data.total || response.data.list.length
      }
      
      // 对通知进行排序：未读的排在前面，已读的排在后面
      allNotifications.value = notificationList.sort((a, b) => {
        // 如果a未读b已读，a排前面
        if (!a.readStatus && b.readStatus) return -1
        // 如果a已读b未读，b排前面
        if (a.readStatus && !b.readStatus) return 1
        // 如果读取状态相同，按时间倒序排列（新的在前）
        return new Date(b.sendTime || b.createTime) - new Date(a.sendTime || a.createTime)
      })
    } else {
      allNotifications.value = []
    }
  } catch (error) {
    console.error('获取全部通知失败:', error)
    allNotifications.value = []
  }
}

// 通知分页变化
const handleNotificationPageChange = (page) => {
  notificationQueryParams.value.pageNum = page
  fetchAllNotifications()
}

// 修改mounted钩子
onMounted(() => {
  loadExamList()
  fetchNotifications() // 加载通知
  // 每秒检查一次考试状态
  timer = setInterval(() => {
    now.value = Date.now()
    checkExamStatus()
  }, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})

// 查询
const handleQuery = () => {
  queryParams.value.pageNum = 1 // 重置页码
  filterAndPaginateExams()
}

// 重置
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 9,
    examName: '',
    subject: '',
    status: ''
  }
  filterAndPaginateExams()
}

// 页码改变
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  filterAndPaginateExams()
}

// 每页条数改变
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  queryParams.value.pageNum = 1
  filterAndPaginateExams()
}
</script>

<style scoped>
.exam-list-container {
  padding: 40px 60px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.filter-container {
  margin-bottom: 30px;
  border-radius: 12px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(10px);
}

.filter-container :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 20px;
}

.filter-container :deep(.el-input) {
  width: 220px;
}

.filter-container :deep(.el-select) {
  width: 220px;
}

.filter-container :deep(.el-input__prefix) {
  color: #909399;
}

.exam-cards-container {
  margin-top: 30px;
}

.waterfall-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 60px;
  padding: 30px 0;
  width: 70%;
  margin: 0 auto;
}

.waterfall-item {
  width: calc((100% - 120px) / 3);
  margin-bottom: 30px;
  animation: fadeInUp 0.6s ease-out both;
  animation-delay: var(--delay);
  transform: scale(0.7);
  transform-origin: top center;
}

.exam-card {
  height: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 12px;
  border: none;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  will-change: transform, filter, box-shadow;
}

.card-blue {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.card-blue .exam-card {
  background: linear-gradient(175deg, rgba(255,255,255,0.9) 0%, rgba(236,246,255,0.8) 100%);
  box-shadow: 0 8px 16px rgba(33,150,243,0.1);
}

.card-blue .icon-wrapper {
  background: rgba(33,150,243,0.1) !important;
  color: #1976D2 !important;
}

.card-green {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.card-green .exam-card {
  background: linear-gradient(175deg, rgba(255,255,255,0.9) 0%, rgba(232,245,233,0.8) 100%);
  box-shadow: 0 8px 16px rgba(76,175,80,0.1);
}

.card-green .icon-wrapper {
  background: rgba(76,175,80,0.1) !important;
  color: #388E3C !important;
}

.card-purple {
  background: linear-gradient(135deg, #EDE7F6 0%, #D1C4E9 100%);
}

.card-purple .exam-card {
  background: linear-gradient(175deg, rgba(255,255,255,0.9) 0%, rgba(237,231,246,0.8) 100%);
  box-shadow: 0 8px 16px rgba(103,58,183,0.1);
}

.card-purple .icon-wrapper {
  background: rgba(103,58,183,0.1) !important;
  color: #5E35B1 !important;
}

.card-orange {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}

.card-orange .exam-card {
  background: linear-gradient(175deg, rgba(255,255,255,0.9) 0%, rgba(255,243,224,0.8) 100%);
  box-shadow: 0 8px 16px rgba(255,152,0,0.1);
}

.card-orange .icon-wrapper {
  background: rgba(255,152,0,0.1) !important;
  color: #F57C00 !important;
}

.exam-card:hover {
  filter: brightness(1.05);
  transform: translateY(-5px);
}

.exam-card:active {
  transform: scale(0.98);
}

.exam-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: 10px;
}

.exam-title {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
  line-height: 1.4;
  max-width: 70%;
  word-break: break-word;
}

.exam-info {
  flex: 1;
  margin-bottom: 20px;
  padding: 0 10px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: #34495e;
  font-size: 14px;
  padding-right: 10px;
}

.icon-wrapper {
  margin-right: 10px;
  font-size: 18px;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.duration-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.duration-wrapper .icon-wrapper {
  margin-left: auto;
  margin-right: 0;
}

.exam-time-info {
  margin-bottom: 20px;
  padding: 0 10px;
}

.exam-actions {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: auto;
}

.action-button {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
}

.action-button:not(.is-disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.action-button.is-disabled {
  background-color: #f5f7fa !important;
  border-color: #e4e7ed !important;
  color: #c0c4cc !important;
  cursor: not-allowed;
}

.action-button.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

.pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.pagination :deep(.el-pagination__sizes) {
  margin-right: 20px;
}

.pagination :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: var(--el-color-primary);
  color: #fff;
}

.pagination :deep(.el-pagination.is-background .el-pager li) {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}

:deep(.el-loading-spinner) .circular {
  animation: loading-rotate 2s linear infinite;
}

:deep(.el-loading-spinner) .path {
  stroke: #409EFF;
  stroke-width: 3;
}

.exam-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exam-countdown {
  display: none;
}

:deep(.face-detection-dialog) .el-dialog__body {
  padding: 0;
}

.face-detection-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 通知相关样式 */
.notification-container {
  margin-bottom: 30px;
  border-radius: 12px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(10px);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.notification-badge :deep(.el-badge__content) {
  background-color: #ff4d4f;
}

/* 折叠状态样式 */
.notification-collapsed {
  padding: 10px 0;
}

.notification-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #909399;
  font-size: 14px;
}

.notification-summary .el-icon {
  font-size: 16px;
  color: #409EFF;
}

/* 展开状态样式 */
.notification-expanded {
  padding: 10px 0;
}

.notification-scrollbar {
  margin-bottom: 10px;
}

.notification-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 10px;
  height: 90px; /* 固定每个通知项的高度 */
  box-sizing: border-box;
}

.notification-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.notification-item:hover {
  background-color: #f5f7fa;
  transform: translateY(-2px);
}

.notification-item.unread {
  background-color: #f0f7ff;
}

.notification-priority {
  width: 4px;
  border-radius: 2px;
  margin-right: 10px;
  align-self: stretch;
}

.priority-high {
  background-color: #f56c6c;
}

.priority-normal {
  background-color: #e6a23c;
}

.priority-low {
  background-color: #67c23a;
}

.notification-content {
  flex: 1;
}

.notification-title-text {
  font-weight: 500;
  margin-bottom: 5px;
  color: #303133;
  font-size: 16px;
}

.notification-brief {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.unread-badge {
  color: #1890ff;
  font-weight: 500;
}

.notification-more {
  text-align: center;
  margin-top: 15px;
}

.empty-notifications {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

/* 通知详情样式 */
.notification-detail {
  padding: 10px;
}

.notification-detail-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #606266;
}

.notification-detail-content {
  font-size: 14px;
  line-height: 1.6;
  color: #303133;
  white-space: pre-wrap;
}

/* 全部通知弹窗样式 */
.all-notifications-container {
  max-height: 600px;
}

.all-notifications-list {
  max-height: 500px;
  overflow-y: auto;
}

.notification-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
